<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css">
  <script th:src="@{/layui/jquery-3.4.1.min.js}" type="text/javascript"></script>
</head>
<body>

<div style="margin-top: 10px;margin-bottom: 10px;margin-left: 10px">
  <div class="layui-form-item">
    <form action="/user/search" method="post" class="layui-inline">
    <div class="layui-inline">
      <a class="layui-btn layui-btn-primary layui-border-blue" th:href="@{/user/add}">新增</a>
    </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="text" name="uid" lay-verify="title" autocomplete="off" placeholder="请输入ID" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="text" name="uname" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="text" name="uage" lay-verify="title" autocomplete="off" placeholder="请输入年龄" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <button type="submit" class="layui-btn layui-btn-normal">
          <i class="layui-icon">
            &#xe615;
          </i>
        </button>
      </div>
      <div class="layui-inline">
        <button type="button" class="layui-btn layui-btn-primary  layui-border-red" onclick="deleteList();">批量删除</button>
      </div>
    </form>
  </div>
</div>

</div>
<table class="layui-table">
  <thead>
  <tr>
    <th style="width: 30px">
      <input type="checkbox" lay-skin="primary" onclick="Check()" class="layui-unselect layui-form-checkbox">
    </th>
    <th>ID</th>
    <th>名字</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="user:${users}">
    <td>
      <input  type="checkbox" name="checkId" lay-skin="primary" class="layui-unselect layui-form-checkbox" th:value="${user.uid}">
    </td>
    <td th:text="${user.uid}"></td>
    <td th:text="${user.uname}"></td>
    <td th:text="${user.uage}"></td>
    <td>
      <a class="layui-btn layui-btn-primary layui-border-blue" th:href="@{/user/delete/}+${user.uid}">删除</a>
      <a class="layui-btn layui-btn-primary layui-border-blue" th:href="@{/user/updata/}+${user.uid}">修改</a>
    </td>
  </tr>
  </tbody>
</table>

<script type="text/javascript">
  var isCheckAll = false;
  function Check() {
    if (isCheckAll) {
      $("input[type='checkbox']").each(function() {
        this.checked = false;
      });
      isCheckAll = false;
    } else {
      $("input[type='checkbox']").each(function() {
        this.checked = true;
      });
      isCheckAll = true;
    }
  }
  function deleteList() {

    var checkNum = $("input[name='checkId']:checked").length;

    if(checkNum==0){
      alert("至少选择一项");
      return;
    }

    if(confirm("确定要删除吗？")){
      var checkList = new Array();
      $("input[name='checkId']:checked").each(function () {
        checkList.push($(this).val())
      });
    }

    $.ajax({
      url:"/user/deleteList",
      type:"post",
      data:{
        checkList:checkList.toString()
      },
      datatype:"json",
      success:function (data) {
        location.reload();
        alert("删除成功！")
      },
      error:function (msg) {
        alert("删除失败！")
      }
    })
  }
</script>
</body>
</html>